
<template>
    <div>
        <!-- {{ $store.getters.roles }} -->
        <!-- {{ $store.getters.permission_routes }}  -->
          <!-- {{ permission_routes }} -->
        <!-- 自定义滚动条组件el-scrollbar ，wrap-class="scrollbar-wrapper"自定义滚动条容器样式-->
        <el-scrollbar wrap-class="scrollbar-wrapper"> 
             <!--当前激活菜单的 index，mode="vertical"：垂直布局的侧边栏菜单。:unique-opened="false"：允许同时展开多个子菜单
             :collapse-transition="false"：禁用折叠动画（可提升性能）  -->
            <el-menu :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
                :active-text-color="variables.menuActiveText" mode="vertical" :unique-opened="false"
                :collapse-transition="false">
                <!-- 遍历路由表，渲染侧边栏菜单 -->
                <sidebar-item
                v-for="route in permission_routes"
                :key="route.path"
                :item="route"
                :base-path="route.path"
                />
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
export default {
    name: 'IndexView',
    components: {
        SidebarItem
    },
    computed: {
        ...mapGetters(["permission_routes"]),
        activeMenu() {
           const route = this.$route
           const { meta, path } = route
           //黙认激活的路由
           if (meta.activeMenu) {
               return meta.activeMenu
           }
           return path
        },
        variables() {
            return {
                menuText: '#bfcbd9',
                menuActiveText: '#409EFF',
                menuBg: '#304156'                
            }
        }

    }
}
</script>